import React from 'react'
import { success, error, info, Link, Toast, Input, Checkbox } from '../ui-components'
import { Button } from 'sq-ui';
import style from './style'
import { connect } from 'react-redux'
import util from '../util'

class FindPassword extends React.Component {

  state = {
    submit: false,
    email: ''
  }

  handleSubmit() {
    const { email } = this.state
    if (this.validate()) return

    info('邮件发送中...')
    this.props.findPassword(email, url => {
      success('重置密码邮件发送成功!')
      this.setState({
        submit: true
      })
    })
  }

  validate() {
    return this.props.validate(['email'], this)
  }

  handleBlur() {
    if (!this.state.email.trim()) return
    return this.props.validate(['email'], this)
  }

	render() {
    if (this.state.submit) return (
      <div className={style['after-find-password']}>
        <h2>发送成功</h2>
        <p>恭喜，密码重置连接发送成功，请到企业邮箱进行查收，如果未找到邮件，请到垃圾箱查看。</p>
      </div>
    )
		return (
			<div>
        <div className={style.form}>
          <h2 className={style.title}>找回密码</h2>
          <div className={style.input}>
            <input 
              ref="email"
              autoFocus
              onBlur={::this.handleBlur}
              placeholder="邮箱帐号" 
              value={this.state.email} 
              onChange={e => this.setState({ email: e.target.value.trim() })}
            />
          </div>
          <Button blue className={style.button} onClick={::this.handleSubmit} label="发送密码重置链接" />
          <Link label="返回登录" _ className={style['return-login']} to='#/login'/>
        </div>
			</div>
		)
	}
}

export default FindPassword
